<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409EFF;">
              <el-icon><Collection /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalHerbs || 0 }}</div>
              <div class="stat-label">药材总数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67C23A;">
              <el-icon><FolderOpened /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalCategories || 0 }}</div>
              <div class="stat-label">分类数量</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #E6A23C;">
              <el-icon><Warning /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.warningCount || 0 }}</div>
              <div class="stat-label">库存预警</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #F56C6C;">
              <el-icon><Clock /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ statistics.expiringCount || 0 }}</div>
              <div class="stat-label">即将过期</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card header="库存预警">
          <el-table :data="warningList" v-loading="loading" height="300">
            <el-table-column prop="herbName" label="药材名称" />
            <el-table-column prop="quantity" label="当前库存" width="100">
              <template #default="{ row }">
                <el-tag :type="getQuantityTagType(row.quantity)" size="small">
                  {{ row.quantity }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="storageLocation" label="存储位置" width="120" />
            <el-table-column prop="batchNumber" label="批次号" width="120" />
            <el-table-column label="操作" width="80">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleViewInventory(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card header="即将过期药材">
          <el-table :data="expiringList" v-loading="loading" height="300">
            <el-table-column prop="herbName" label="药材名称" />
            <el-table-column prop="expirationDate" label="过期日期" width="120">
              <template #default="{ row }">
                {{ formatDate(row.expirationDate) }}
              </template>
            </el-table-column>
            <el-table-column prop="daysUntilExpiry" label="剩余天数" width="100">
              <template #default="{ row }">
                <el-tag :type="getExpiryTagType(row.daysUntilExpiry)" size="small">
                  {{ row.daysUntilExpiry }}天
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="batchNumber" label="批次号" width="120" />
            <el-table-column label="操作" width="80">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleViewInventory(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { herbInventoryApi, dashboardApi } from '@/api/admin'

const router = useRouter()
const loading = ref(false)
const warningList = ref([])
const expiringList = ref([])

const statistics = reactive({
  totalHerbs: 0,
  totalCategories: 0,
  warningCount: 0,
  expiringCount: 0
})

const loadStatistics = async () => {
  try {
    const res = await dashboardApi.getStatistics()
    Object.assign(statistics, res.data)
  } catch (error) {
    console.error('加载统计信息失败:', error)
  }
}

const loadData = async () => {
  loading.value = true
  try {
    const [warningRes, expiringRes] = await Promise.all([
      herbInventoryApi.getWarningList(),
      herbInventoryApi.getExpiringList()
    ])
    warningList.value = warningRes.data || []
    expiringList.value = expiringRes.data || []

    // 更新统计信息中的数量
    statistics.warningCount = warningList.value.length
    statistics.expiringCount = expiringList.value.length
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
}

const handleViewInventory = (row) => {
  router.push('/admin/herb-inventory')
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString()
}

const getQuantityTagType = (quantity) => {
  if (quantity <= 100) return 'danger'
  if (quantity <= 500) return 'warning'
  if (quantity <= 1000) return 'info'
  return 'success'
}

const getExpiryTagType = (days) => {
  if (days < 0) return 'danger'
  if (days <= 7) return 'danger'
  if (days <= 30) return 'warning'
  return 'success'
}

onMounted(() => {
  loadStatistics()
  loadData()
})
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.stat-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-icon .el-icon {
  font-size: 24px;
  color: white;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-label {
  color: #909399;
  font-size: 14px;
}
</style>
